import React from 'react'
import { Outlet } from 'react-router-dom'
import './style/tem.css'
import { Layout } from 'antd';
import Side from './Side';

const { Header, Sider, Content } = Layout;

const headerStyle = {
    textAlign: 'center',
    color: '#000',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#fff',
  };
  const contentStyle = {
    textAlign: 'center',
    minHeight: 600,
    lineHeight: '120px',
    color: '#000',
    backgroundColor: '#fff',
  };
  const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#000',
    backgroundColor: '#fff',
  };
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
    maxWidth: 'calc(100% - 8px)',
    margin: '0px',
    padding: '0px'
  };
  const Home = () => (
    <Layout style={layoutStyle}>
      <Sider width="25%" style={siderStyle}>
        <Side></Side>
      </Sider>
      <Layout>
        <Header style={headerStyle}>南方梦想实业有限公司</Header>
        <Content style={contentStyle}>
            <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
  export default Home;
